<!--  -->
<template>
  <div class="page-main">
    <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
      <el-form-item label="审核状态">
        <el-select v-model="formInline.status" placeholder="选择审核状态" @change="changeDateSelect">
          <el-option label="不通过" value="3"></el-option>
          <el-option label="通过" value="1"></el-option>
          <el-option label="未审核" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="时间">
                <el-date-picker v-model="pickerDateArr" type="date" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
      </el-form-item>-->
      <el-form-item label="时间">
        <el-date-picker
          v-model="pickerDateArr"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="changeDatePicker"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="formInline.company_name" placeholder="输入公司名称"></el-input>
      </el-form-item>
      <el-form-item label="登录账号">
        <el-input v-model="formInline.account" placeholder="输入账号"></el-input>
      </el-form-item>
      <el-form-item label="所属地区">
        <el-select v-model="formInline.area_status" placeholder="选择所属公司" @change="selectArea">
          <el-option label="全部" :value="-1"></el-option>
          <el-option
            v-for="(item, index) in getOfficesList"
            :key="item"
            :label="item"
            :value="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '40%' }"></CustomDescriptions>
    </CustomForm>

    <el-table :data="list" style="width: 100%" height="600" align="center" v-loading="tableLoading">
      <el-table-column prop="area_company" label="所属地区" width="100" align="center"></el-table-column>
      <!-- <el-table-column prop="id" label="用户ID" align="center" width="80">
      </el-table-column>-->
      <el-table-column
        prop="company_name"
        label="公司名称"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="username" label="法人姓名" align="center">
        <template slot-scope="scope">{{ $maskString(scope.row.username) }}</template>
      </el-table-column>
      <!-- <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>-->
      <el-table-column prop="zh" label="登陆账号" align="center"></el-table-column>
      <el-table-column prop="oil" label="油卡比例" align="center" width="80"></el-table-column>
      <!-- <el-table-column prop="service" label="服务费" align="center" width="80">
      </el-table-column>-->
      <el-table-column prop="tax" label="运费税率" align="center" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.tax == 0">--</span>
          <span v-else>{{ scope.row.tax }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 4" style="color:red">未审核</span>
          <span v-else-if="scope.row.status == 1" style="color: green;">通过</span>
          <span v-else-if="scope.row.status == 2" style="color: red;">未通过</span>
        </template>
      </el-table-column>
      <el-table-column prop="is_pay_tax" label="服务费扣减" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.is_pay_tax == 1" style="color:green">开启</span>
          <span v-if="scope.row.is_pay_tax == 0" style="color:red">关闭</span>
        </template>
      </el-table-column>
      <el-table-column prop="multiple_payments" label="多笔支付" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.multiple_payments == 1" style="color:green">开启</span>
          <span v-if="scope.row.multiple_payments == 0" style="color:red">关闭</span>
        </template>
      </el-table-column>
      <el-table-column prop="is_real_money" label="实结金额" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.is_real_money == 1" style="color:green">隐藏</span>
          <span v-if="scope.row.is_real_money == 0" style="color:red">显示</span>
        </template>
      </el-table-column>
      <el-table-column prop="is_pause" label="货主状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.is_pause == 0" style="color:green">正常</span>
          <span v-if="scope.row.is_pause == 1" style="color:red">暂停</span>
        </template>
      </el-table-column>
      <el-table-column label="开启货主支付" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_pay"
            :disabled="!(scope.row.status == 1)"
            v-loading="switchLoading"
            @change="(val) => switchIsPay(val, scope.row.id)"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="branch_company" label="子公司" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
           {{ scope.row.branch_company ? scope.row.branch_company : '暂无' }}
        </template>
      </el-table-column>
      <el-table-column prop="business_user_name" label="业务员" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
           {{ scope.row.business_user_name ? scope.row.business_user_name : '暂无' }}
        </template>
      </el-table-column>

      <el-table-column prop="add_time" label="添加时间" align="center" width="160"></el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="reset(scope.row)">设置</el-button>

          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="in-page-dropdown">
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  @click="getHapproveDetail(scope.row.id)"
                  v-if="scope.row.status == 4"
                >审核</el-button>
              </el-dropdown-item>

              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  @click="getHapproveDetail(scope.row.id, true)"
                  v-if="scope.row.status != 4"
                >查看</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  @click="phoneForm = scope.row; dialogPhone = true"
                >手机号</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="primary" @click="changeStatus(scope.row)">
                  {{ scope.row.is_pause == 0 ? '暂停' : '恢复' }}
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="primary" @click="allocation(scope.row)">分配</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="$pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog
      title="审核货主信息"
      top="5vh"
      :visible.sync="dialogVisibleAuditing"
      width="70%"
      :before-close="handleClose"
    >
      <AuditingDialog
        v-if="dialogVisibleAuditing"
        :form="auditingForm"
        @reject="dialogRejectHandler"
        @save="auditingSave"
        :readonly="dialogReadonly"
        @showSave="showSave"
      ></AuditingDialog>
    </el-dialog>

    <el-dialog title="修改货主手机与登录账号" :visible.sync="dialogPhone" width="40%">
      <el-alert title="修改前请先确定该账号没有正在进行中的业务！！！" type="error" :closable="false"></el-alert>
      <el-form ref="form" :model="phoneForm" label-width="120px">
        <el-form-item label="公司名称">
          <el-input v-model="phoneForm.company_name"></el-input>
        </el-form-item>
        <el-form-item label="货主手机号">
          <el-input v-model="phoneForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="货主账号">
          <el-input v-model="phoneForm.zh"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPhone = false">取 消</el-button>
        <el-button type="primary" @click="dialogPhone = false">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="请选择拒绝原因" :visible.sync="dialogReject" width="30%">
      <el-form ref="form" :model="formReject" label-width="120px">
        <el-form-item label="身份证人像页">
          <el-select v-model="formReject.idFront" placeholder="选择错误类型">
            <el-option label="照片模糊不清晰" value="照片模糊不清晰"></el-option>
            <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
            <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
            <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证国徽页">
          <el-select v-model="formReject.idBack" placeholder="选择错误类型">
            <el-option label="照片模糊不清晰" value="照片模糊不清晰"></el-option>
            <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
            <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
            <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-select v-model="formReject.driverFront" placeholder="选择错误类型">
            <el-option label="照片模糊不清晰" value="照片模糊不清晰"></el-option>
            <el-option label="照片未漏出四个边,不完整" value="照片未漏出四个边,不完整"></el-option>
            <el-option label="照片反光,不能正常使用" value="照片反光,不能正常使用"></el-option>
            <el-option label="证件未按名称要求上传" value="证件未按名称要求上传"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogReject = false">取 消</el-button>
        <el-button type="primary" @click="rejectHandler">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="carTrace"
      title="设置货主事项"
      top="5vh"
      :visible.sync="dialogSet"
      width="40%"
      :modal="true"
    >
      <el-form ref="form" :model="setShipperform" label-width="100px" class="set-form">
        <el-form-item label="运费税率">
          <el-input-number v-model="setShipperform.tax" controls-position="right" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="服务费扣减">
          <!-- <el-input-number v-model="setShipperform.tax" controls-position="right" :min="0"></el-input-number> -->
          <el-switch
            v-model="setShipperform.is_pay_tax"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="(e)=>switchChange(e,'is_pay_tax')"
          ></el-switch>
        </el-form-item>

        <el-form-item label="多笔支付">
          <!-- <el-input-number v-model="setShipperform.tax" controls-position="right" :min="0"></el-input-number> -->
          <el-switch
            v-model="setShipperform.multiple_payments"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="(e)=>switchChange(e,'multiple_payments')"
          ></el-switch>
        </el-form-item>
        <el-form-item label="实结金额">
          <!-- <el-input-number v-model="setShipperform.tax" controls-position="right" :min="0"></el-input-number> -->
          <el-switch
            v-model="setShipperform.is_real_money"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="隐藏"
            inactive-text="显示"
            @change="(e)=>switchChange(e,'is_real_money')"
          ></el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="sureSet">确认设置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="分配业务员/子公司" top="20vh" :visible.sync="dialogAllocation" width="30%">
      <Allocation v-if="dialogAllocation" :row="allocationForm" @refresh="resetTable" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getHapproveList,
  getHapproveDetail,
  reviewShipper,
  saveHapprove,
  setTax,
  updatePayStatus,
  setPauseOwner
} from "@/api/shipper";
import AuditingDialog from "./components/auditingDialog.vue";
import Allocation from "./components/allocation.vue";
import { getOfficesList } from "@/utils/auth";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    AuditingDialog,
    Allocation
  },
  data() {
    //这里存放数据
    return {
      getOfficesList: getOfficesList(),
      list: [],
      total: 0,
      formInline: {
        status: "",
        time: "",
        company_name: "",
        area_status: 0,
        account: ""
      },
      page: 1,
      pageSize: 10,
      labelStyle: { "text-align": "center", "font-weight": "bold" },
      contentStyle: {
        color: "#444",
        "font-weight": "bold",
        "min-width": "200px"
      },
      pickerDateArr: null,
      tableLoading: false,

      dialogVisibleAuditing: false, //审核dialog框显示
      dialogPhone: false, //修改手机号dialog框显示
      auditingForm: {
        zj_type: "",
        zz_type: "",
        id_pic: "",
        id_pic2: "",
        license_pic: ""
      },

      costForm: {},
      phoneForm: {},
      dialogReject: false,
      rejectId: "",
      formReject: {
        idFront: "",
        idBack: "",
        driverFront: ""
      },
      descriptionsData: [
        {
          label: "总认证人数",
          count: 0,
          unit: "(人)"
        }
      ],
      dialogReadonly: false, //false表示审核,true表示auditingDialog子组件是保存的状态

      dialogSet: false, //设置货主事项的dialog框

      setShipperform: {
        tax: 0,
        id: 0,
        is_pay_tax: 0,
        multiple_payments: 0,
        is_real_money: 0
      },
      switchLoading: false,
      dialogAllocation: false,
      allocationForm: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async auditingSave(data) {
      let {
        id,
        zj_type,
        zz_type,
        is_test,
        shxydm,
        company_name,
        username,
        phone,
        area,
        bank_name,
        bank
      } = data;
      let res = await reviewShipper({
        id,
        zj_type,
        zz_type,
        is_test,
        shxydm,
        company_name,
        username,
        phone,
        area,
        bank_name,
        bank,
        status: 1
      });
      if (res.code == 200) {
        this.$message.success(res.msg);
        this.dialogVisibleAuditing = false;
        this.page = 1;
        this.getHapproveList();
      }
    },
    //分配子公司和业务人员
    allocation(row) {
      this.allocationForm = row;
      this.dialogAllocation = true;
    },
    async getHapproveList() {
      this.tableLoading = true;
      let res = await getHapproveList({
        ...this.formInline,
        page: this.page,
        pageSize: this.pageSize
      });
      if (res.code == 200) {
        this.total = res.data.count;
        this.descriptionsData[0].count = res.data.count;
        this.list = res.data.list;
      }
      this.tableLoading = false;
    },
    async getHapproveDetail(id, readonly = false) {
      if (readonly) {
        this.dialogReadonly = true;
      } else {
        this.dialogReadonly = false;
      }
      let res = await getHapproveDetail({
        id
      });
      if (res.code == 200) {
        this.auditingForm = res.data;
        this.dialogVisibleAuditing = true;
      } else {
        this.$message.error(res.msg);
      }
    },
    //修改货主状态
    changeStatus(row) {
      let is_pause = row.is_pause;
      this.$confirm("确定要修改货主状态吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let result = await setPauseOwner({
            id: row.id,
            type: is_pause == 1 ? 0 : 1
          });
          if (result.code == 200) {
            this.$message.success(result.msg);
            this.getHapproveList();
          }
        })
        .catch(() => {});
    },
    switchChange(e, type) {
      if (type == "is_pay_tax") {
        if (e == 1) {
          //多笔支付不能为1
          if (this.setShipperform.multiple_payments == 1) {
            this.$message.error("服务费扣减和多笔支付无法同时开启");
            this.setShipperform.is_pay_tax = 0;
          }
        }
      }
      if (type == "multiple_payments") {
        if (e == 1) {
          //服务费扣减不能为1
          if (this.setShipperform.is_pay_tax == 1) {
            this.$message.error("服务费扣减和多笔支付无法同时开启");
            this.setShipperform.multiple_payments = 0;
          }
        }
      }
    },
    onSubmit(data) {
      this.page = 1;
      this.getHapproveList();
    },
    changeDateSelect(selectData) {
      this.formInline.status = selectData;
      this.page = 1;
      this.getHapproveList();
    },
    changeDatePicker(data) {
      if (data) {
        this.formInline.time = data.join(" - ");
      } else {
        this.formInline.time = "";
      }
      this.page = 1;
      this.getHapproveList();
    },
    resetTable() {
      this.formInline = {
        status: "",
        time: "",
        company_name: "",
        area_status: 0
      };
      this.dialogAllocation = false;
      this.pickerDateArr = null;
      this.page = 1;
      this.pageSize = 10;
      this.getHapproveList();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.page = 1;
      this.getHapproveList();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.getHapproveList();
    },
    handleClose() {
      this.dialogVisibleAuditing = false;
    },
    dialogRejectHandler(id) {
      this.dialogReject = true;
      this.rejectId = id;
    },
    async rejectHandler() {
      if (
        !this.formReject.driverFront &&
        !this.formReject.idBack &&
        !this.formReject.idFront
      ) {
        this.$message.error("请至少选择一项原因");
        return;
      }
      let res = await reviewShipper({
        id: this.rejectId,
        ...this.formReject,
        status: 2
      });
      if (res.code == 200) {
        this.$message.success(res.msg);
        this.dialogReject = false;
        this.dialogVisibleAuditing = false;
        this.resetTable();
        this.getHapproveList();
      }
    },
    selectArea() {
      this.getHapproveList();
    },
    async showSave(form) {
      //子组件保存的回调
      console.log(form);
      let res = await saveHapprove(form);
      if (res.code == 200) {
        this.dialogVisibleAuditing = false;
        this.getHapproveList();
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
        this.dialogVisibleAuditing = false;
      }
    },

    reset(row) {
      this.dialogSet = true;
      this.setShipperform.id = row.id;
      this.setShipperform.tax = row.tax;
      this.setShipperform.is_pay_tax = row.is_pay_tax;
      this.setShipperform.multiple_payments = row.multiple_payments;
      this.setShipperform.is_real_money = row.is_real_money;
    },
    async sureSet() {
      if (this.setShipperform.is_pay_tax == 1) {
        //开启了服务费扣减
        if (this.setShipperform.tax <= 0) {
          this.$message.error("运费税率必须大于0！");
          return;
        }
      }

      let res = await setTax(this.setShipperform);
      if (res.code == 200) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
      this.dialogSet = false;
      this.getHapproveList();
    },
    async switchIsPay(val, id) {
      this.switchLoading = true;
      let res = await updatePayStatus({
        id,
        type: val
      });
      this.switchLoading = false;
      if (res.code === 200) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getHapproveList();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.row-info {
  width: 30%;
}

::v-deep .el-pagination {
  margin-top: 20px;
}

::v-deep .el-alert {
  margin: 0 0 20px 0;
}

.set-form {
  margin: 50px 30% 50px 30%;

  ::v-deep .el-input-number__increase {
    display: none;
  }

  ::v-deep .el-input-number__decrease {
    display: none;
  }

  ::v-deep .el-input-number {
    width: 100%;

    .el-input__inner {
      text-align: left;
    }
  }
}
</style>